import { useState, useEffect } from 'react';
import { Flex, Search, Sticky, Toast } from 'react-vant';
import { Swiper, NoticeBar } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:3000/';

const img = [
  'https://img2.baidu.com/it/u=3864455414,3446982669&fm=253&fmt=auto&app=120&f=JPEG?w=1198&h=800',
  'https://img0.baidu.com/it/u=623684325,670627234&fm=253&fmt=auto&app=138&f=JPEG?w=1069&h=625',
  'https://img1.baidu.com/it/u=225286335,292282960&fm=253&fmt=auto&app=120&f=JPEG?w=1325&h=800',
  'https://img2.baidu.com/it/u=2634291633,1546101058&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'
];

let iimg = [
  { id: 1, name: "王腾达", img: 'https://img0.baidu.com/it/u=3349541954,896710726&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800' },
  { id: 2, name: "撒哈拉", img: 'https://img0.baidu.com/it/u=1699541861,2643162679&fm=253&fmt=auto&app=138&f=JPEG?w=759&h=427' },
  { id: 3, name: "热带雨林", img: 'https://img1.baidu.com/it/u=914480192,2111906792&fm=253&fmt=auto&app=138&f=JPEG?w=1185&h=800' },
  { id: 4, name: "基站", img: 'https://img0.baidu.com/it/u=2950147915,2478818748&fm=253&fmt=auto&app=138&f=JPEG?w=1085&h=800' },
  { id: 5, name: "魔鬼沙漠", img: 'https://img1.baidu.com/it/u=2966269906,3926813414&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333' },
  { id: 6, name: "黄土高坡", img: 'https://img1.baidu.com/it/u=3588767063,4129335192&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500' },
  { id: 7, name: "大沙漠", img: 'https://img2.baidu.com/it/u=2280610928,311689561&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500' },
  { id: 8, name: "戈壁滩", img: 'https://img2.baidu.com/it/u=2560102528,1360571712&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' },
  { id: 9, name: "有山有水", img: 'https://img2.baidu.com/it/u=2752066627,2275882947&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800' },
  { id: 10, name: "桂林山水", img: 'https://img1.baidu.com/it/u=2147210602,1858505573&fm=253&fmt=auto&app=120&f=PNG?w=701&h=309' },
  { id: 11, name: "雪山之巅", img: 'https://img0.baidu.com/it/u=1363164538,3616872180&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },
  { id: 12, name: "黄山", img: 'https://img2.baidu.com/it/u=229775214,848457668&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' },
  { id: 13, name: "伏虎山", img: 'https://img2.baidu.com/it/u=2874035754,4131152146&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500' },
  { id: 14, name: "大峡谷", img: 'https://img0.baidu.com/it/u=365059556,4105239873&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=293' },
  { id: 15, name: "地质公园", img: 'https://img1.baidu.com/it/u=225286335,292282960&fm=253&fmt=auto&app=120&f=JPEG?w=1325&h=800' },
  { id: 16, name: "富士山", img: 'https://img0.baidu.com/it/u=2634291633,1546101058&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800' },
  { id: 17, name: "鸡你太美", img: 'https://img0.baidu.com/it/u=3349541954,896710726&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800' },
  { id: 18, name: "赛罗", img: 'https://img0.baidu.com/it/u=2950147915,2478818748&fm=253&fmt=auto&app=138&f=JPEG?w=759&h=427' },
  { id: 19, name: "贝利亚", img: 'https://img0.baidu.com/it/u=1699541861,2643162679&fm=253&fmt=auto&app=138&f=JPEG?w=759&h=427' },
  { id: 20, name: "奥菲以诺", img: 'https://img1.baidu.com/it/u=914480192,2111906792&fm=253&fmt=auto&app=138&f=JPEG?w=1185&h=800' },
  { id: 21, name: "奥特之王", img: 'https://img2.baidu.com/it/u=3864455414,3446982669&fm=253&fmt=auto&app=120&f=JPEG?w=1198&h=800' },
  { id: 22, name: "炎头队长", img: 'https://img2.baidu.com/it/u=3864455414,3446982669&fm=253&fmt=auto&app=120&f=JPEG?w=1198&h=800' },
];

const demoLongText = ['文旅头条提醒你：场馆预约开放时间通告，请各位游客提前预约，以免造成不必要的麻烦，感谢您的支持与配合！'];

const items = img.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      style={{ background: color }}
      onClick={() => {
        Toast.show(`你点击了卡片 ${index + 1}`)
      }}
    >
      <img src={color} alt="" style={{ width: "400px" }} />
    </div>
  </Swiper.Item>
));

export default function Index() {
  const navigate = useNavigate();
  const [value, setValue] = useState('');
  const [list, setList] = useState([]);
  const [iimgDisplay, setIimgDisplay] = useState(iimg);

  let getData = () => {
    axios.get('jingqu').then(res => {
      setList(res.data.data)
    })
  };

  useEffect(() => {
    getData();
  }, []);

  // 搜索功能修改，更新iimgDisplay状态来改变显示的数据
  let search = () => {
    setIimgDisplay(iimg.filter(item => item.name.toLowerCase().includes(value.toLowerCase())));
  };

  return (
    <div>
      {/* 吸顶搜索框 */}
      <Sticky>
        <Search
          showAction
          actionText={<div onClick={() => search()}>搜索</div>}
          value={value}
          onChange={(e) => setValue(e)}
          placeholder="请输入搜索关键词"
        />
      </Sticky>
      <Swiper style={{ height: '200px' }}
        loop
        autoplay
        onIndexChange={i => {
          console.log(i, 'onIndexChange1')
        }}
      >
        {items}
      </Swiper>
      <NoticeBar content={demoLongText} color='alert' onClick={() => { navigate('/shou/tonggao') }} />
      <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around' }}>
        {iimgDisplay.map(i => (
          <div key={i.id} style={{ margin: '10px', textAlign: 'center' }}>
            <img src={i.img} style={{ width: "170px", height: '100px' }} alt={i.name} />
            <p>{i.name}</p>
          </div>
        ))}
      </div>
    </div>
  );
}